<template>
    <section>
        <div><slot/></div>
    </section>
</template>

<style lang="scss" scoped>
    section{
        perspective: 800px;
    }

    div{
        display: inline-block;
        border-radius: 0.5rem;
        padding: 5px 10px;
        background-color:#16a085;
        color: #fff;
        cursor: pointer;
        animation: identifier 2s ease;
        transition:.5s;
        &:hover{
            //   transform: rotateY(360deg) rotateX(100deg);
            background-color:#f39c12;
        }
    }

    @keyframes identifier {
      from {
        transform: translateX(-10px);
      }
      20% {
        transform: translateX(10px);
      }
      40% {
        transform: translateX(-10px);
      }
      60% {
        transform: translateX(10px);
      }
      80% {
        transform: translateX(-10px);
      }
      to {
        transform: translateX(0px);
      }
    }
</style>
